<!-- 这里是攻略详情侧边栏 -->
<template>
  <div class="adiseContainers">
    <p class="title">
      <i class="iconfont" style="color:#ffe700">&#xe60c;</i>推荐攻略
    </p>
    <div
      class="adiseItem"
      v-for="item in dataList"
      :key="item.id"
      @click="goDetail(item.id)"
    >
      <el-row type="flex">
        <div class="imgs" v-if="item.images.length > 1">
          <img :src="item.images[0]" alt />
        </div>
        <div class="adiseContent">
          <p class="content">{{ item.title }}</p>
          <p class="data">
            {{ $moment(item.created_at).format("YYYY-MM-DD HH:MM") }}
          </p>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: ""
    };
  },
  methods: {
    goDetail(id) {
      // console.log(id);
      let pathId = this.$route.query.id;
      if (pathId == id) {
        return;
      }
      this.$router.replace({
        path: "/post/detail?id=" + id
      });
    }
  },
  mounted() {
    this.$axios({
      url: "/posts",
      params: {
        _start: 0,
        _limit: 5
      }
    }).then(res => {
      this.dataList = res.data.data;
      // console.log("文章列表", this.dataList);
    });
  }
};
</script>

<style lang="less" scoped>
.adiseContainers {
  padding: 5px;
  box-shadow: 4px 4px 5px #999;
  .title {
    padding: 10px 0;
    font-size: 18px;
    font-weight: 700;
    color: orange;
    border-bottom: 1px solid #ccc;
    .iconfont {
      font-size: 22px;
      margin-right: 3px;
    }
  }
  .adiseItem {
    cursor: pointer;
    display: flex;
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
    &:nth-last-child(1) {
      border: none;
    }
    .imgs {
      width: 100px;
      height: 80px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .adiseContent {
      position: relative;
      flex: 1;
      height: 80px;
      .content {
        line-height: 1.4em;
        height: 2.8em;
        overflow: hidden;
        color: #333;
      }
      .data {
        position: absolute;
        bottom: 0;
        left: 0;
        color: #999;
        width: 127px;
      }
    }
  }
}
</style>
